;
(function(designWidth, maxWidth) {
    var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        maxWidth = maxWidth || 540;
        width > maxWidth && (width = maxWidth);
        var rem = width * 100 / designWidth;
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
    }

    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
    } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
    }
    //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
    refreshRem();

    win.addEventListener("resize", function() {
        clearTimeout(tid); //防止执行两次
        tid = setTimeout(refreshRem, 300);
    }, false);

    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
            doc.body.style.fontSize = "16px";
        }, false);
    }
})(750, 750);

//判断手机类型
window.onload = function() {
    //alert($(window).height());
    var u = navigator.userAgent;
    if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //安卓手机
    } else if (u.indexOf('iPhone') > -1) { //苹果手机
        //屏蔽ios下上下弹性
        $(window).on('scroll.elasticity', function(e) {
            e.preventDefault();
        }).on('touchmove.elasticity', function(e) {
            e.preventDefault();
        });
    } else if (u.indexOf('Windows Phone') > -1) { //winphone手机
    }
    //预加载
    loading();
}

var date_start;
var date_end;
date_start = getNowFormatDate();
//加载图片
var loading_img_url = [

];
var tsbtnimg = [
    // 第1页
    {
        djbtn: [{
                top: 140,
                left: 140,
                url: './music/dora.mp3'
            },


        ],
        szbtn: []
    },
    // 第2页
    {
        djbtn: [

        ],
        szbtn: [{
            top: 60,
            left: 200,
            url: './music/dora.mp3'
        }, ]
    },
    // 第3页
    {
        djbtn: [],
        szbtn: [{
            top: 60,
            left: 70,
            url: './music/dora.mp3'
        }, ]
    },
    {
        djbtn: [

        ],
        szbtn: [{
            top: 250,
            left: 120,
            url: './music/wood.mp3'
        }, ]
    },
    {
        djbtn: [{
            top: 250,
            left: 120,
            url: './music/wood.mp3'
        }],
        szbtn: []
    },
    {
        djbtn: [],
        szbtn: []
    },
    {
        djbtn: [

        ],
        szbtn: [{
            top: 250,
            left: 230,
            url: './music/wall.mp3'
        }]
    },
    {
        djbtn: [],
        szbtn: [{
            top: 250,
            left: 140,
            url: './music/water.mp3'
        }, ]
    },
    {
        djbtn: [],
        szbtn: [{
            top: 100,
            left: 120,
            url: './music/dora.mp3'
        }, ]
    },
    {
        djbtn: [],
        szbtn: []
    },
    {
        djbtn: [],
        szbtn: []
    },
    {
        djbtn: [],
        szbtn: []
    },
    {
        djbtn: [],
        szbtn: []
    },
    {
        djbtn: [],
        szbtn: []
    },

];
var tsbtnimgele = []
for (var k = 0; k < tsbtnimg.length; k++) {
    var djitem = ''; //圆圈item
    for (var j = 0; j < tsbtnimg[k].djbtn.length; j++) {
        var eletop = tsbtnimg[k].djbtn[j].top * 2 / 100;
        var eleleft = tsbtnimg[k].djbtn[j].left * 2 / 100;
        var eleurl = tsbtnimg[k].djbtn[j].url;
        console.log(eleurl, 'url');
        djitem += '<div class="item djitem" onclick="playfn(' + 0 + ',' + k + ',' + j + ')" style="top:' + eletop + 'rem; left:' + eleleft + 'rem; width:' + 1 + 'rem; height:' + 1 + 'rem;"><img src="./image/dj.png"/></div>'

    }
    var szitem = ''; //手指item
    for (var j = 0; j < tsbtnimg[k].szbtn.length; j++) {
        var eletop = tsbtnimg[k].szbtn[j].top * 2 / 100;
        var eleleft = tsbtnimg[k].szbtn[j].left * 2 / 100;
        var eleurl = tsbtnimg[k].szbtn[j].url;
        szitem += '<div class="item djitem" onclick="playfn(' + 1 + ',' + k + ',' + j + ')" style="top:' + eletop + 'rem; left:' + eleleft + 'rem;"><img src="./image/szdj.gif"/></div>'
    }
    var allitem = djitem + szitem
    tsbtnimgele.push(allitem) //推元素
}
console.log(tsbtnimgele, '元素');

var fybox = ""
for (var ii = 0; ii <= 27; ii++) {
    loading_img_url.push("./image/" + ii + ".jpg");
    fybox += '<li><a href="javascripe:;"><img src="./image/' + ii + '.jpg" alt=""></a></li>'
}

$('.sjbox>ul').bind('click', function() {

})

console.log(loading_img_url, 'wei');

var img_heights = {};

// 点击播放
function playfn(type, page, index) {
    // 圆圈
    if (type == 0) {
        $("#ypmp3").attr('src', tsbtnimg[page].djbtn[index].url)
    }
    // 手指
    if (type == 1) {
        $("#ypmp3").attr('src', tsbtnimg[page].szbtn[index].url)
    }
    // console.log(type,page,index,'播放')
    var audio1 = $("#ypmp3")[0];
    audio1.play();
}





//加载页面
function loading() {
    var numbers = 0;
    var length = loading_img_url.length
    $('.ymicon span').eq(1).html(length)
    $('.shade').show();
    for (var i = 0; i < length; i++) {
        var i_temp = i;
        var img = new Image();
        img.src = loading_img_url[i];
        img.onerror = function() {
            numbers += (1 / length) * 100;
        }
        img.index_id = i;
        img.onload = function() {
            img_heights['img' + (this.index_id + 1)] = this.height;
            numbers += (1 / length) * 100;
            $('.number').html(+parseInt(numbers) + "%");
            // console.log(numbers);
            //所有图片加载完丑执行渲染
            if (Math.round(numbers) == 100) {
                //$('.number').hide();
                date_end = getNowFormatDate();
                var loading_time = date_end - date_start;
                //预加载图片
                $(function progressbar() {
                    //拼接图片
                    $('.shade').hide();
                    var tagHtml = "";
                    for (var i = 1; i <= length; i++) {
                        var idstr = "";
                        var dqpag = ""
                        dqpag = 'class="tsbox"';
                        if (i == 1) {
                            idstr = 'id="first"';
                        } else if (i == length) {
                            idstr = 'id="end"';
                        } else if (i > 5) {
                            dqpag == 'class="dtxz"'
                        } else {}
                        tagHtml += ' <div class="mwbg" ' + idstr + ' style="background:url(' + './image/bg.jpg' + ') center center;background-size:100%"><div ' + dqpag + ' ><div class="tsbtn" style="background-image:url(' + loading_img_url[i - 1] + ');">' + tsbtnimgele[i - 1] + '</div></div></div>';
                    }
                    $(".flipbook").append(tagHtml);
                    $('.sjbox>ul').append(fybox);
                    $('.sjbox>ul').height($(document).height())
                    $('.sjbox ul li').click(function() {
                        $('.zdymodel').hide()
                        $('.sjbox>ul').eq($(this).index())
                        gonpage($(this).index())
                    })

                    var w = $(".graph").width();
                    $(".flipbook-viewport").show();

                });
                var martop = ($(window).height() - $('.tsbtn').height()) / 2
                $('.tsbtn').css('marginTop', martop)
                    //配置turn.js
                function loadApp() {
                    var w = $(window).width();
                    var h = $(window).height();
                    $('.flipboox').width(w).height(h);
                    $(window).resize(function() {
                        w = $(window).width();
                        h = $(window).height();
                        $('.flipboox').width(w).height(h);
                    });
                    $('.flipbook').turn({
                        duration: 1500,
                        // Width
                        width: w,
                        // Height
                        height: h,
                        // Elevation
                        elevation: 50,
                        display: 'single', //double
                        // Enable gradients
                        gradients: true,
                        // Auto center this flipbook
                        autoCenter: true,
                        when: {
                            turning: function(e, page, view) {
                                $('.ymicon span').eq(0).html(page)
                                    // console.trace();
                                if (page == 1) {
                                    $(".btnImg").css("display", "block");
                                    $(".mark").css("display", "block");
                                } else {
                                    $(".btnImg").css("display", "block");
                                    $(".mark").css("display", "none");
                                }
                                if (page == length) {
                                    $(".nextPage").css("display", "none");
                                } else {
                                    $(".nextPage").css("display", "block");
                                    var audio = $("#fymap3")[0];
                                    audio.play();
                                }
                            },
                            turned: function(e, page, view) {
                                var total = $(".flipbook").turn("pages"); //总页数
                                if (page == 1) {
                                    $(".return").css("display", "block");
                                    $(".btnImg").css("display", "block");
                                } else {
                                    $(".return").css("display", "block");
                                    $(".btnImg").css("display", "block");
                                }
                                if (page == 2) {
                                    $(".catalog").css("display", "block");
                                } else {
                                    $(".catalog").css("display", "none");
                                }
                            }
                        }
                    })
                }
                yepnope({
                    test: Modernizr.csstransforms,
                    // yep: ['js/turn.js'],
                    complete: loadApp
                });
            };
        }
    }


}

function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "";
    var seperator2 = "";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
        "" + date.getHours() + seperator2 + date.getMinutes() +
        seperator2 + date.getSeconds();
    return currentdate;
}